<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中布局</title>
    <style>
       #parent1{
           height: 400px;
           background-color: #ccc;

           /* display属性
              table：设置当前元素为<table>元素
              table-cell：设置当前元素为<td>元素*/
           display: table-cell;
           /* vertical-align属性用于设置文本内容的垂直方向对齐方式
              top：顶部对齐
              middle：居中对齐
              bottom：底部对齐 */
           vertical-align: middle; 
       }
       #child1{
           width: 200px;
           height: 200px;
           background-color: red;
       }

       #parent2{
           width: 100%;
           height: 400px;
           background-color: #ccc;

           position: relative;
       }
       #child2{
           width: 200px;
           height: 200px;
           background-color: red;

           position: absolute;
           /* 将元素顶部的边缘移动到父级元素的50%的位置 */
           top: 50%;
           /* 移动子级元素的的y的负方向的50% */
           transform: translateY(-50%);
       }
    </style>
</head>
<body>
    <!-- table-cell + vertical-align属性配合使用
         优点：浏览器兼容性好
         缺点：vertical-align属性具有继承性，导致父级元素的本文也是居中显示的-->
     <div id="parent1">
        <div id="child1">
             垂直居中对齐第一种方式
        </div>
     </div>

    <!-- absolute + transform属性配合使用
         优点：父级元素是否脱离文档流，不影响子级元素的居中效果
         缺点：transform属性是css3中的新增属性，浏览器支持情况不好 -->
    <div id="parent2">
        <div id="child2">
             垂直居中对齐第二种方式
        </div>
    </div>
</body>
</html>